<template>
  <div>
    <div class="edit">
      <el-form-item
        label="文章标题："
        prop="name"
        :rules="[
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 1, max: 10, message: '至少输入1-10个字数', trigger: 'blur' },
        ]"
      >
        <el-input
          v-model="numberValidateForm.title"
          maxlength="10"
          placeholder="请输入文章标题"
        />
      </el-form-item>
      <el-form-item
        label="文章封面："
        prop="name"
        :rules="[
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 1, max: 10, message: '至少输入1-10个字数', trigger: 'blur' },
        ]"
      >
        <Upload :img="props.viewData.img"></Upload>
      </el-form-item>
      <el-form-item
        label="文章详情："
        prop="name"
        :rules="[
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 1, max: 10, message: '至少输入1-10个字数', trigger: 'blur' },
        ]"
      >
        <New :value="props.viewData.text"></New>
      </el-form-item>
      <el-form-item
        label="文章分类："
        prop="name"
        class="sort"
        :rules="[
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 1, max: 10, message: '至少输入1-10个字数', trigger: 'blur' },
        ]"
      >
        <el-cascader :options="cascader" clearable />
      </el-form-item>
      <el-form-item
        label="文章排序："
        prop="name"
        class="sort"
        :rules="[{ required: true, message: '请输入分类排序' }]"
      >
        <el-input
          v-model="numberValidateForm.sort"
          maxlength="10"
          placeholder="排序值越大，内容展示越靠前，最大输入9999"
          oninput="value=value.replace(/[^\d]/g,'')"
        />
      </el-form-item>
      <el-button class="sure-button" type="primary" @click="release(1)"
        >确认发布</el-button
      >
      <el-button type="info" @click="release(2)">暂不发布</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, reactive } from "vue";
import Upload from "../common/Upload.vue";
import New from "@/views/components/article/New.vue";
const emits = defineEmits(["closeEdit"]);
const props = defineProps(["viewData"]);
const numberValidateForm = reactive({
  title: props.viewData.title,
  sort: props.viewData.sort,
});
const cascader = ref([
  {
    value: "guide",
    label: "Guide",
    children: [
      {
        value: "disciplines",
        label: "Disciplines",
        children: [
          {
            value: "consistency",
            label: "Consistency",
          },
          {
            value: "feedback",
            label: "Feedback",
          },
          {
            value: "efficiency",
            label: "Efficiency",
          },
          {
            value: "controllability",
            label: "Controllability",
          },
        ],
      },
      {
        value: "navigation",
        label: "Navigation",
        children: [
          {
            value: "side nav",
            label: "Side Navigation",
          },
          {
            value: "top nav",
            label: "Top Navigation",
          },
        ],
      },
    ],
  },
]);

const release = (i: number) => {
  emits("closeEdit", false);
  if (i === 1) {
    ElMessage({
      showClose: true,
      message: "发布成功",
      type: "success",
    });
  } else if (i === 2) {
  }
};
</script>
<style lang="scss" scoped>
.sure-button {
  margin-left: 102px;
}

:deep(.avatar-uploader .avatar) {
  width: 178px;
  height: 178px;
  display: block;
}

.edit {
  padding: 10px 5px;
}
.sort {
  width: 400px;
}
:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

:deep(.el-form-item__content) {
  flex-direction: column;
  align-items: stretch;
}
</style>
